import React from 'react';
import { Button, Card, Row, Col, List, Divider } from 'antd';
import {
  CodeOutlined,
  ShareAltOutlined,
  HistoryOutlined,
  CloudUploadOutlined,
  CodeSandboxOutlined,
  ToolOutlined,
  CheckOutlined
} from '@ant-design/icons';

const HomePage = () => {
  const features = [
    {
      icon: <CodeOutlined className="text-2xl" />,
      color: 'bg-blue-400',
      title: '创建和组织提示词',
      description: '轻松创建、编辑和组织您的AI提示词，使用文件夹和标签系统进行分类，让您的提示词库井井有条。'
    },
    {
      icon: <ShareAltOutlined className="text-2xl" />,
      color: 'bg-pink-400',
      title: '分享与社区',
      description: '一键分享您的提示词，生成分享码供他人使用。在提示词广场发现和获取优质提示词，激发创作灵感。'
    },
    {
      icon: <HistoryOutlined className="text-2xl" />,
      color: 'bg-purple-400',
      title: '版本控制与备份',
      description: '支持提示词版本控制，记录每次修改。提供本地备份和云端同步，确保您的数据安全且随时可用。'
    }
  ];

  const featureList = [
    '本地化管理',
    '版本控制',
    'AI生成与优化',
    '云端备份',
    '分享与社区',
    '在线调试提示词'
  ];

  const cards = [
    {
      icon: <CodeSandboxOutlined className="text-3xl" />,
      bg: 'bg-yellow-100',
      title: 'AI助手',
      description: '智能AI助手可一键生成专业提示词，优化现有提示词结构，帮您解决创作瓶颈。'
    },
    {
      icon: <HistoryOutlined className="text-3xl" />,
      bg: 'bg-pink-100',
      title: '版本控制',
      description: '每个提示词支持多版本管理，记录修改历史，随时回滚到之前的版本。'
    },
    {
      icon: <ToolOutlined className="text-3xl" />,
      bg: 'bg-blue-100',
      title: '在线调试',
      description: '配置自己的APIKEY,即可开始在线调试提示词。'
    },
    {
      icon: <CloudUploadOutlined className="text-3xl" />,
      bg: 'bg-purple-100',
      title: '云端备份',
      description: '支持将数据备份到云端，使用邮箱和自定义密钥进行身份验证，确保数据安全。'
    }
  ];

  return (
    <div className="w-full max-w-screen-xl mx-auto overflow-hidden">
      {/* Hero Section */}
      <section className="px-4 md:px-8 py-12 md:py-24">
        <Row gutter={[48, 32]} align="middle" className="max-w-7xl mx-auto">
          <Col xs={24} lg={12} className="px-4">
            <div className="text-center lg:text-left">
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
                AI提示词的<span className="text-purple-600">管理专家</span>
              </h1>
              <p className="text-lg text-gray-600 mb-8 max-w-lg">
                高效管理您的AI提示词，支持本地存储和云端备份，让您的创意随时随地可用。
              </p>
              <Button
                type="primary"
                size="large"
                className="bg-purple-600 hover:bg-purple-700 h-12 px-8 text-lg"
                href="/app"
              >
                立即开始
              </Button>
            </div>
          </Col>
          <Col xs={24} lg={12} className="px-4">
            <div className="relative max-w-xl mx-auto">
              <img
                className="w-full h-auto rounded-2xl shadow-lg object-cover"
                style={{ maxHeight: '400px' }}
                src="https://io.onenov.cn/file/202503210334550.png"
                alt="Prompt Management"
              />
            </div>
          </Col>
        </Row>
      </section>

      {/* Features Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-16">
            <span className="text-purple-600 font-bold text-lg">提示词管理的全新体验</span>
            <h2 className="text-3xl md:text-4xl font-bold mt-3">简单易用的Prompt助手</h2>
          </div>
          <div className="relative">
            <Divider className="hidden lg:block absolute top-1/2 left-0 right-0 max-w-4xl mx-auto h-1 bg-gradient-to-r from-blue-400 via-pink-500 to-purple-500" />
            <Row gutter={[32, 32]}>
              {features.map((feature, index) => (
                <Col xs={24} md={8} key={index} className="px-4">
                  <Card className="h-full border-0 shadow-none text-center bg-transparent">
                    <div className={`mb-6 mx-auto flex w-16 h-16 items-center justify-center rounded-full text-white ${feature.color}`}>
                      {feature.icon}
                    </div>
                    <h3 className="text-xl md:text-2xl font-bold mb-4">{feature.title}</h3>
                    <p className="text-gray-600">{feature.description}</p>
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-16">
        <div className="max-w-6xl mx-auto px-4">
          <Row gutter={[48, 32]} align="middle">
            <Col xs={24} lg={12} className="px-4">
              <div className="max-w-md mx-auto lg:mx-0">
                <span className="text-purple-600 font-bold text-lg">提升AI创作效率</span>
                <h2 className="text-3xl md:text-4xl font-bold my-4">让AI提示词管理更简单</h2>
                <p className="text-lg text-gray-600 mb-8">让生产力加倍的 AI 快捷指令</p>
                <List
                  dataSource={featureList}
                  renderItem={(item) => (
                    <List.Item className="flex items-center py-3 border-0">
                      <CheckOutlined className="mr-3 text-green-500 text-xl" />
                      <span className="text-gray-700 text-lg">{item}</span>
                    </List.Item>
                  )}
                  className="bg-transparent"
                />
              </div>
            </Col>
            <Col xs={24} lg={12} className="px-4">
              <Row gutter={[24, 24]}>
                {cards.map((card, index) => (
                  <Col xs={24} md={12} key={index} className={index >= 2 ? 'lg:mt-8' : ''}>
                    <Card className="h-full p-6 hover:shadow-md transition-all duration-300 border border-gray-100">
                      <div className={`mb-4 inline-flex p-3 rounded-lg ${card.bg}`}>
                        {card.icon}
                      </div>
                      <h4 className="text-xl font-bold mb-3">{card.title}</h4>
                      <p className="text-gray-600">{card.description}</p>
                    </Card>
                  </Col>
                ))}
              </Row>
            </Col>
          </Row>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">不仅仅是一个提示词管理工具</h2>
          <p className="text-lg text-gray-600 mb-8">
            PromptPlus是您AI创作的得力助手，帮助您管理、优化和分享提示词，提升创作效率和质量。
          </p>
          <Button
            type="primary"
            size="large"
            className="bg-purple-600 hover:bg-purple-700 h-12 px-8 text-lg"
            href="/app"
          >
            立即体验
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-50 border-t border-gray-200">
        <div className="h-2 flex">
          <div className="w-1/3 bg-blue-400"></div>
          <div className="w-1/3 bg-pink-400"></div>
          <div className="w-1/3 bg-green-400"></div>
        </div>
        <div className="max-w-6xl mx-auto px-4 py-6">
          <div className="flex flex-wrap justify-center items-center gap-4">
            <Button type="text" size="small">Copyright ECMCLOUD 2025</Button>
            <Button type="text" size="small">ECMCLOUD</Button>
            <Button type="text" shape="circle" size="small" icon={<ToolOutlined />} />
          </div>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;
